<template>
	<div class="theme">
		<van-nav-bar left-arrow @click-left="$router.back(-1)" @click-right="$router.push({name:'MySharePool'})">
			<div slot="right">
				<img src="../assets/images/share1.png" width="20px" style="vertical-align: middle;" />
			</div>
		</van-nav-bar>
		<div class="overlay headTop">
			<div class="overlay-content scrolling">
				<div class="share-title">
					<p>可用余额</p>
					<p><span v-text="balance"></span> USDT</p>
					<div class="share-title-tab">
						<div class="tab-on">算池列表</div>
					</div>
				</div>
				<div class="share-content">
					<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
						<van-list v-model="loading" :finished="finished" @load="onLoad" :finished-text="noDate">
							<van-grid :gutter="10" :column-num="2" :center="false">
								<van-grid-item v-for="(el,i) in list" :key="i" class="share-content-list" @click="$router.push({name:'SharePoolDetails',params:{'countSharedPoolId':el.id,'countPoolCode':el.countPoolCode,'status':el.status}})">
									<div class="share-content-list-title">
										<div style="position: relative;width: 26px;float: left;">
											<img src="../assets/images/share2.png" width="100%" v-if="i == 0" />
											<img src="../assets/images/share3.png" width="100%" v-if="i == 1" />
											<img src="../assets/images/share4.png" width="100%" v-if="i == 2" />
											<img src="../assets/images/share5.png" width="100%" v-if="i > 2" />
											<span class="list-num" :style="{color: i > 2 ? '' : '#FFFFFF' }">{{(i + 1)}}</span>
										</div>
										<div style="float: left;line-height: 26px;margin-left: 10px;">
											<p>算池编号</p>
											<p style="color: #999999;" v-text="el.countPoolCode"></p>
										</div>
									</div>
									<div class="share-content-list-content">
										<p>
											<van-progress :percentage="parseFloat((el.packageNum - el.remainingNum) / el.packageNum * 100).toFixed(3).slice(0,-1)" color="#ff4646" stroke-width="4px" :pivot-text="el.packageNum - el.remainingNum == 0 ? '' : el.packageNum - el.remainingNum" />
											<!--<span class="percentage" v-text="parseFloat((el.packageNum - el.remainingNum) / el.packageNum * 100).toFixed(3).slice(0,-1) + '%'"></span>-->
										</p>
										<p>
											<van-row>
												<van-col span="12">
													<p>周期</p>
													<p v-text="el.cycle + '天'"></p>
												</van-col>
												<van-col span="12">
													<p>状态</p>
													<p v-text="formatStatus(el.status)"></p>
												</van-col>
											</van-row>
										</p>
									</div>
								</van-grid-item>
							</van-grid>
						</van-list>
					</van-pull-refresh>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { base, home } from './../utils/api';
	import { formatDate } from './../utils/date';
	export default {
		name: 'SharePool',
		components: {},
		props: {},
		data() {
			return {
				list: [],
				tab: true,
				orderShow: false,
				showKeyboard: false,
				num: '',
				password: '',
				checked: '',
				value: 0,
				balance: '0.0000',
				size: 10, //每页数量
				total: '', //总数量
				listLength: '', //当前总数量
				isLoading: false,
				finished: false,
				loading: false,
				noDate: '没有更多了',
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			onInput(val) {
				if(this.num.includes('.') && val === '.') {
					return false;
				}
				if(this.num.indexOf('.') != -1 && this.num.indexOf('.') + 4 < this.num.length) {
					return false;
				}
				this.num += val;
				this.axios.get(process.env.API_HOST + "user/tansfer/fee/" + this.num + '/1').then(res => {
					if(res.data.code == 200) {
						this.fee = parseFloat(res.data.data).toFixed(5).slice(0, -1);
					}
				});
			},
			onDelete() {
				this.num = this.num.slice(0, -1)
			},
			getBalance() {
				base.getMyInfo().then(res => {
					this.balance = parseFloat(res.data.availableNum).toFixed(5).slice(0, -1);
				})
			},
			onRefresh() { // 下拉刷新
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
					this.getList();
				}, 500);
			},
			onLoad() { // 上拉加载
				// 异步更新数据
				this.getList();
			},
			getList() {
				home.getSharedPools({
					current: 1,
					size: this.size,
					type: 1,
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data.records;
						if(this.list == '') {
							this.noDate = '暂无数据';
						}
						this.listLength = res.data.records.length;
						this.total = res.data.total;
						if(this.total > this.listLength) {
							this.size += 10;
							this.loading = false;
						} else {
							// 加载状态结束
							this.finished = true;
							this.loading = false;
						}
					}
				})
			},
			formatStatus(status) {
				switch(Number(status)) {
					case 1:
						return '待打包';
						break;
					case 2:
						return '打包中';
						break;
					case 3:
						return '打包成功';
						break;
					case 4:
						return '打包失败';
						break;
					case 5:
						return '已完成';
						break;
				}
			}
		},
		created() {},
		mounted() {
			this.getBalance();
		},
		destroyed() {

		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			}
		}
	};
</script>

<style lang="less" scoped>
	.overlay-content {
		background: #f8f8f8;
		.share-title {
			font-size: 15px;
			color: #59595b;
			padding: 10px 10px 0;
			color: #59595b;
			background: #FFFFFF;
			.share-title-tab {
				margin-top: 20px;
				font-size: 15px;
				color: #FFFFFF;
				border-bottom: 1px solid #f4b56b;
				padding-bottom: 20px;
				.tab-on {
					background: #f4b56b !important;
				}
				div {
					display: inline-block;
					background: #cccccc;
					padding: 5px 13px;
					border-radius: 5px;
				}
				div:not(:first-child) {
					margin-left: 15px;
				}
			}
		}
		.share-content {
			padding: 10px 0;
			.share-content-list {
				/deep/ .van-grid-item__content {
					box-shadow: 1px 1px 3px #dcd8d8;
					padding: 10px;
					border-radius: 5px;
				}
				.share-content-list-title {
					.list-num {
						position: absolute;
						top: calc(~'50% - 2px');
						left: calc(~'50% - 0px');
						transform: translate(-50%, -50%);
						font-size: 13px;
					}
				}
				.share-content-list-content {
					margin-top: 15px;
					.van-row {
						margin-top: 15px;
						text-align: center;
						p:last-child {
							padding-top: 5px;
						}
						p:first-child {
							color: #999999;
						}
					}
					.percentage {
						float: right;
						position: relative;
						top: -20px;
						/*12 + 6 + 2*/
						font-size: 12px;
					}
				}
			}
		}
	}
	
	/deep/ .van-nav-bar {
		background-color: #FFFFFF;
	}
	
	/deep/ .van-nav-bar .van-icon {
		color: #999999;
	}
	
	/deep/ .van-nav-bar__arrow {
		font-size: 18px;
	}
	
	.van-hairline--bottom::after {
		border-bottom-width: 0px;
	}
	
	.van-nav-bar__left {
		left: 8px;
	}
	
	.van-cell--clickable:active {
		background-color: transparent;
	}
	
	.w-50 {
		width: 50%;
	}
	
	.van-pull-refresh {
		overflow: visible!important;
	}
</style>